<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据展示</title>
    <link rel="shortcut icon" href="#"/>

    <script src="js/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
</head>
<body>
<div class="container">
    <div class="row col-md-10 col-md-offset-1">
        <p>
            <button id="addPerson" class="btn btn-info" data-toggle="modal" data-target="#exampleModal">新增</button>
        </p>
        <table class="table table-bordered table-hover">
            <thead>
            <tr>
                <th>员工编号</th>
                <th>员工姓名</th>
                <th>员工年龄</th>
                <th>员工密码</th>
                <th>出生日期</th>
                <th>员工邮箱</th>
                <th>员工地址</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbb">
            </tbody>
            <tfoot id="page"></tfoot>
        </table>
<!--        用来保存当前页码,方便增删改获取单签页码来进行操作后重新获取数据,保留在原页面-->
        <input type="hidden" id="pageNum" value="1"/>
    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document ">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">表格</h4>
                </div>
                <div class="modal-body">
                    <form id="dataForm">
                        <div class="form-group">
                            <label for="username" class="control-label">员工姓名:</label>
                            <input type="text" class="form-control" id="username" name="username">
                            <input type="hidden" class="form-control" id="id" name="id">
                        </div>
                        <div class="form-group">
                            <label for="age" class="control-label">员工年龄:</label>
                            <input type="number" class="form-control" id="age" name="age">
                        </div>
                        <div class="form-group">
                            <label for="password" class="control-label">员工密码:</label>
                            <input type="password" class="form-control" id="password" name="password">
                        </div>
                        <div class="form-group">
                            <label for="bornDate" class="control-label">出生日期:</label>
                            <input type="date" class="form-control" id="bornDate" name="bornDate">
                        </div>
                        <div class="form-group">
                            <label for="email" class="control-label">员工邮箱:</label>
                            <input type="email" class="form-control" id="email" name="email">
                        </div>
                        <div class="form-group">
                            <label for="address" class="control-label">员工地址:</label>
                            <input type="text" class="form-control" id="address" name="address">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" id="close">Close</button>
                    <button type="button" class="btn btn-primary" id="sub">Send message</button>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        // <!--展示数据前清空表单数据,原因,aiax数据更新是局部,不影响已展示的数据,固应先清空-->
        function clear() {
            $(":input").val("");
        }

        function close() {
            $("#close").click();
            clear();
        }

        $("#sub").click(function () {
            var data = $("#dataForm").serialize();
            var flag = "addPerson";
            var id = $("input[name='id']").val();
            if (id.length > 0) {
                //新增数据没有id,修改数据有id
                flag = "updatePerson";
            }
            $.post("/person?method=" + flag, data, function (result) {
                if (result == "success") {
                    alert("操作成功");
                } else {
                    alert("操作失败");
                }

                //获取当前页码
                var pageNum = $("#pageNum").val();
                //使用当前页码获取分页数据
                getData(pageNum);
                close();
            });
        });

        /*删除数据*/
        function delPerson(id) {
            if (confirm("是否确认删除")) {
                $.post("/person", "method=deletePerson&id=" + id, function (data) {
                    if (data == "success") {
                        alert("删除成功")
                    } else {
                        alert("删除失败")
                    }
                    //获取当前页码
                    var pageNum = $("#pageNum").val();
                    //使用当前页码获取分页数据
                    getData(pageNum);
                });
            }
        }

        /*修改数据*/
        function updatePerson(id) {
            //获取id
            $.post("/person", "method=getPersonById&id=" + id, function (data) {
                if (data == "null") {
                    alert("没有需要修改的数据");
                    return;
                } else {
                    //填充数据
                    var person = JSON.parse(data);
                    $("input[name='username']").val(person.name);
                    $("input[name='age']").val(person.age);
                    $("input[name='password']").val(person.password);
                    $("input[name='bornDate']").val(person.bornDate);
                    $("input[name='email']").val(person.email);
                    $("input[name='address']").val(person.address);
                    $("input[name='id']").val(person.id);
                    //显示表格
                    $("#addPerson").click();
                }
            });
        }

        //获取数据
        function getData(pageNum) {
            if (pageNum == "null" || pageNum < 0) {
                pageNum = 1;
            }
            //name=张三&age=18&salary=100.9
            $.post("/person", "method=getAll&pageNum=" + pageNum, function (result) {
                //防止数据追加,清除数据
                $("#tbb").empty();
                if (result == null) {
                    $("#tbb").append("<tr><td colspan='8'>暂无数据</td></tr>")
                } else {
                    //解析接收的数据
                    var data = JSON.parse(result);
                    var personList = data.list;
                    for (var i = 0; i < personList.length; i++) {
                        $("#tbb").append("<tr>" +
                            "<td>" + personList[i].id + "</td>" +
                            "<td>" + personList[i].name + "</td>" +
                            "<td>" + personList[i].age + "</td>" +
                            "<td>" + personList[i].password + "</td>" +
                            "<td>" + personList[i].bornDate + "</td>" +
                            "<td>" + personList[i].email + "</td>" +
                            "<td>" + personList[i].address + "</td>" +
                            "<td><a href='javascript:updatePerson(" + personList[i].id + ")' " +
                            "class=\"btn btn-warning\" role=\"button\">修改</a> &nbsp; " +
                            "<a href='javascript:delPerson(" + personList[i].id + ")' " +
                            "class=\"btn btn-danger\" role=\"button\">删除</a></td>" +
                            "</tr>");
                        //    javascript:updatePerson("+data[i].id+")--->跳转至当前页面的方法
                    }
                    //设置分页条
                    //获取分页数据
                    $("#pageNum").val(data.pageNum);
                    //防止叠加,清空分页条数据
                    $("#page").empty();
                   /* $("#page").append(" <tr>" +
                        "<td colspan='8' align='center'>" +
                        " <a href='javascript:getData(1)'>首页</a>" +
                        " <a href='javascript:getData(" + (data.prePage) + ")'>上一页</a>" +
                        " <a href='javascript:getData(" + (data.nextPage) + ")'>下一页</a>" +
                        " <a href='javascript:getData(" + (data.pages) + ")'>尾页</a>" +
                        data.pageNum + "&nbsp;/&nbsp;" + data.pages +
                        " </td>" +
                        " </tr>")*/
                   var fenye = " <tr>" +
                        "<td colspan='8' align='center'>" +
                        "<nav aria-label=\"Page navigation\">" +
                        //   设置页码样式class='pagination'--->方框 class="pager"--->椭圆
                        "  <ul class='pagination'>" +
                        "    <li><a href='javascript:getData(1)'>首页</a></li>";

                   for (var i = 1; i <= data.pages;i++){
                       if (page.pageIndex == i) {
                           fenye += "<li class='active'>";
                       } else {
                           fenye += "<li>";
                       }
                       fenye += "             <a href='javascript:getData(" + i + ")' aria-label='Previous'>" +
                           "        <span aria-hidden='true'>" + i + "</span>" +
                           "    </a>" +
                           "</li>"
                   }

                    fenye+="    <li><a href='javascript:getData(" + (data.pages) + ")'>尾页</a></li>" +
                    "  </ul>" +
                    "</nav>"+
                    "</td>" +
                    "</tr>";
                    $("#page").append(fenye);
                }
            });
        }

        //页面加载,即调用方法展示数据
        $(function () {
            //调用获取数据的函数,默认加载第一页
            getData(1);
        });
    </script>
</div>
</body>
</html>